<template>
  <div class="page">
    <p class="attributes">我的资质</p>

    <div class="approve" v-if="basicinfo.status == 5">
      <table border="1" cellpadding="2">
        <caption style="font-size:17px;margin-bottom:16px;">
          基本信息
        </caption>
        <tr class="title">
          <td>公司ID</td>
          <td>公司名称</td>
          <td>公司简称</td>
          <td>联系人</td>
          <td>联系方式</td>
          <td>微信号</td>
        </tr>
        <tr>
          <td>{{ finaldata.supplierId }}</td>
          <td>{{ finaldata.supplierName }}</td>
          <td>{{ finaldata.supplierNameShort }}</td>
          <td>{{ finaldata.supplierOwnerName }}</td>
          <td>{{ finaldata.mobile }}</td>
          <td>{{ finaldata.supplierWechat }}</td>
        </tr>
        <tr class="title">
          <td>供应区域</td>
          <td>供应商类别</td>
          <td>地址</td>
          <td>结算周期</td>
          <td>审核状态</td>
          <td></td>
        </tr>
        <tr>
          <td>{{ finaldata.supplyAreas }}</td>
          <td>{{ finaldata.typeName }}</td>
          <td>{{ finaldata.address }}</td>
          <template>
            <td v-if="finaldata.cycle == 0">周</td>
            <td v-if="finaldata.cycle == 1">月</td>
            <td v-if="finaldata.cycle == 2">季</td>
          </template>
          <template>
            <td v-if="finaldata.status == 0">初审中</td>
            <td v-if="finaldata.status == 1">补充资料</td>
            <td v-if="finaldata.status == 2">终审中</td>
            <td v-if="finaldata.status == 3">初审不通过</td>
            <td v-if="finaldata.status == 4">终审不通过</td>
            <td v-if="finaldata.status == 5">审核通过</td>
          </template>
          <td></td>
        </tr>
      </table>

      <div class="tu">
        <div class="tu_list">
          <div class="name">营业执照</div>
          <el-image
            class="zizhi"
            style="width: 120px; height: 120px"
            :src="finaldata.runLicense"
            :preview-src-list="getSrc(0)"
          >
          </el-image>
        </div>
        <div class="tu_list">
          <div class="name">食品流通许可证</div>
          <el-image
            class="zizhi"
            style="width: 120px; height: 120px"
            :src="finaldata.foodLicense"
            :preview-src-list="getSrc(1)"
          >
          </el-image>
        </div>
        <div class="tu_list">
          <div class="name">法人代表身份证正面</div>
          <el-image
            class="zizhi"
            style="width: 120px; height: 120px"
            :src="finaldata.representativeLicense"
            :preview-src-list="getSrc(2)"
          >
          </el-image>
        </div>
        <div class="tu_list">
          <div class="name">法人代表身份证反面</div>
          <el-image
            class="zizhi"
            style="width: 120px; height: 120px"
            :src="finaldata.representativeLicenseReverse"
            :preview-src-list="getSrc(3)"
          >
          </el-image>
        </div>
      </div>
    </div>

    <div class="firstinstance" v-else>
      <div class="btn">
        <el-button
          type="primary"
          :disabled="tijiaobtn"
          @click="addsupplier()"
          v-if="!basicinfo.status || basicinfo.status == 3"
          >提交</el-button
        >
        <el-button
          type="primary"
          @click="addinfo()"
          :disabled="btnstatus"
          v-else
          >补充资料</el-button
        >
      </div>
      <div class="basicinfo">
        <el-form label-position="left" label-width="100px" :model="basicinfo">
          <el-form-item label="公司名称">
            <el-input
              v-model="basicinfo.company"
              :disabled="disabled"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系人">
            <el-input
              v-model="basicinfo.supplierName"
              :disabled="disabled"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input
              v-model="basicinfo.moblie"
              :disabled="disabled"
            ></el-input>
          </el-form-item>
          <el-form-item label="微信号">
            <el-input
              v-model="basicinfo.supplierWechat"
              :disabled="disabled"
            ></el-input>
          </el-form-item>
          <el-form-item label="供应类别">
            <el-select
              v-model="supplierTypeId"
              placeholder="请选择"
              :disabled="disabled"
            >
              <el-option
                v-for="item in category"
                :key="item.value"
                :label="item.typeName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="审核状态">
            <el-input v-model="status" disabled></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { gonyin_liebiao, updateSupplier } from "@/api/gonyin.js";
import { getFirstAudit, getSupplierDetail } from "@/api/partner.js";
import { getUserId } from "@/utils/auth";
export default {
  data() {
    return {
      basicinfo: {},
      finaldata: {},
      category: [],
      supplierId: 0,
      disabled: false,
      btnstatus: true,
      tijiaobtn: false,
      status: "",
      tu_list: [],
      supplierTypeId:0,
    };
  },
  mounted() {
    this.firstinit();
    // this.finaldetal()
    this.getcategory();
  },
  methods: {
    getSrc(index) {
      // console.log(index);
      return this.tu_list.slice(index).concat(this.tu_list.slice(0, index));
    },
    // 初审详情
    firstinit() {
      let data = {supplierId:Number(getUserId()),};
      getFirstAudit(data).then(res => {
        console.log(res);
        if (res.code === 20000) {
          this.basicinfo = res.data;
          this.supplierId = res.data.supplierId;
          this.supplierTypeId = res.data.supplierTypeId;
          if (res.data.status == 0) {
            // this.tijiaobtn = true;
            // this.disabled = true;
            this.status = "初审中";
          } else if (res.data.status == 1) {
            this.btnstatus = false;
            this.disabled = true;
            this.status = "补充资料";
          } else if (res.data.status == 2) {
            this.disabled = true;
            this.status = "终审中";
          } else if (res.data.status == 3) {
            // this.disabled = false;
            this.status = "初审不通过";
          } else if (res.data.status == 4) {
            this.disabled = true;
            this.btnstatus = false;
            this.status = "终审不通过";
          } else if (res.data.status == 5) {
            this.status = "审核通过";
            this.finaldetal();
          }
        }
      });
    },
    // 终审详情
    finaldetal() {
      let params = {supplierId:Number(getUserId()),};
      getSupplierDetail(params).then(res => {
        console.log(res,"终审数据");
        if (res.code === 20000) {
          this.finaldata = res.data;
          this.finaldata.supplyAreas = res.data.supplyAreas.splice(2).join(",");
          this.tu_list = [
            res.data.runLicense,
            res.data.foodLicense,
            res.data.representativeLicense,
            res.data.representativeLicenseReverse
          ];
        }
      });
    },
    getcategory() {
      let data = {};
      gonyin_liebiao(data).then(res => {
        console.log(res);
        this.category = res.rows;
      });
    },
    addinfo() {
      this.$router.push({
        path: "myattributes",
        query: { supplierId: this.supplierId }
      });
    },
    // 编辑供应商
    addsupplier() {
      let data = {
        supplierId:Number(getUserId()),
        company: this.basicinfo.company,
        supplierOwnerName: this.basicinfo.supplierName,
        mobile: this.basicinfo.moblie,
        supplierWechat: this.basicinfo.supplierWechat,
        supplierTypeId: this.supplierTypeId
      };
      updateSupplier(data).then(res => {
        console.log(res);
        if (res.code === 20000) {
          this.$message({
            message: "操作成功...",
            type: "success"
          });
          this.firstinit();
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-input.is-disabled .el-input__inner {
  color: #606266 !important;
}
.page {
  padding: 20px 20px;
  .attributes {
    font-size: 22px;
    margin-bottom: 60px;
  }
  .firstinstance {
    margin-left: 60px;
    max-width: 700px;
    .btn {
      text-align: right;
      margin-bottom: 45px;
    }
    .basicinfo {
      max-width: 560px;
    }
  }
  .approve {
    // display: none;
    max-width: 960px;
    margin-left: 60px;
    table {
      width: 100%;
      border-collapse: collapse;
      border: 1px solid #7b7b7b;
      color: #606266;
      tr {
        height: 50px;
        text-align: center;
      }
      .title {
        font-size: 17px;
        color: #000;
      }
    }
    .tu {
      display: flex;
      width: 100%;
      justify-content: space-around;
      margin-top: 100px;
      .tu_list {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 50px;
        .name {
          font-size: 18px;
          margin-bottom: 13px;
        }
      }
    }
  }

  .basicinfo {
    max-width: 700px;
    margin-left: 66px;
  }
}
</style>
